<template>
  <div class="app-content-wrap" :style="'minHeight:' + gHeight + 'px;'">
    <div class="g-content-title">小程序菜单管理</div>
    <!-- 搜索框 -->
    <el-form :model="menuForm" label-width="80px" size="small">
      <el-row :gutter="15">
        <el-col :span="11">
          <el-form-item label="所属小区">
            <AreaSelect :selectModel="menuForm.deptId" :areaIds="areaIds" @onAreaChange="onAreaChange" hideThird="true">
            </AreaSelect>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin:10px 30px;">
      <el-tabs v-model="selectRoleId" @tab-click="roleChangeHandler">
        <el-tab-pane v-for="item in roleList" :key="item.roleId" :name="item.roleId.toString()" :label="item.roleName"></el-tab-pane>
      </el-tabs>
    </div>
    <div style="margin:10px 30px;">
      <div>
        <el-transfer class="transfer-style" v-model="roleMenuIds" :data="allMenuList" :titles="['待选画面', '选中画面']">
          <el-button class="transfer-footer" slot="right-footer" size="small" @click="saveMenu">保存</el-button>
        </el-transfer>
      </div>
    </div>
  </div>
</template>
<script>
import AreaSelect from '../../components/common/select/area.vue'
export default {
  components: {
    AreaSelect
  },
  data () {
    return {
      roleList: [{
        roleId: 1,
        roleName: '小程序管理员'
      }, {
        roleId: 2,
        roleName: '小程序普通用户'
      }], // 1:小程序管理员 2：小程序普通用户
      allMenuList: [], // 所有的菜单
      roleMenuIds: [], // 所选角色的菜单
      gHeight: this.$store.state.gHeight,
      selectRoleId: '1',
      menuForm: {
        deptId: ''
      },
      areaIds: {
        areaId1: '',
        areaId2: ''
      }
    }
  },
  methods: {
    // 获得全部菜单
    getAllMenuList: function () {
      let url = this.$base.getUrl('bizappletdeptmenuGetMenuList')
      let params = {
        isJson: true,
        url: url,
        data: {
          deptId: '',
          menuType: parseInt(this.selectRoleId)
        }
      }
      this.$store.dispatch('postForm', params).then(res => {
        if (res) {
          this.allMenuList = []
          res.result.forEach((obj, index) => {
            this.allMenuList.push({
              key: obj.menuId,
              label: obj.name
            })
          })
        }
      })
    },
    // 获得指定角色的菜单
    getRoleMenuIds: function () {
      let url = this.$base.getUrl('bizappletdeptmenuGetMenuList')
      let params = {
        isJson: true,
        url: url,
        data: {
          deptId: this.menuForm.deptId,
          menuType: parseInt(this.selectRoleId)
        }
      }
      this.$store.dispatch('postForm', params).then(res => {
        if (res) {
          this.roleMenuIds = []
          res.result.forEach((obj, index) => {
            this.roleMenuIds.push(obj.menuId)
          })
        }
      })
    },
    // 变更角色
    roleChangeHandler: function (vm) {
      this.selectRoleId = vm.name
      this.getAllMenuList()
      if (this.menuForm.deptId) {
        this.getRoleMenuIds()
      }
    },
    // 保存指定角色的菜单
    saveMenu: function () {
      this.$confirm('确定保存？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this
        let url = _this.$base.getUrl('bizappletdeptmenuUpdateDeptMenu')
        let params = {
          isJson: true,
          url: url,
          data: {
            deptId: _this.menuForm.deptId,
            menuType: parseInt(_this.selectRoleId),
            menuId: _this.roleMenuIds
          }
        }
        _this.$store.dispatch('postForm', params).then(res => {
          if (res.code === 0) {
            _this.$message({
              type: 'success',
              message: '保存成功！'
            })
            // _this.$route.push({
            //   name: 'deviceSearch'
            // })
          } else {
            _this.$message({
              type: 'danger',
              message: res.msg
            })
          }
        })
      })
    },
    // area组件change时
    onAreaChange (val) {
      this.menuForm.deptId = val
      this.getRoleMenuIds()
    }
  },
  mounted () {
    this.getAllMenuList()
    // this.getRoleMenuIds()
  }
}
</script>

<style scoped>
/deep/ .el-tabs__item {
  color: #fff;
}

/deep/ .el-tabs__item.is-active {
  color: #409eff;
}

/deep/ .el-transfer {
  height: 600px;
}

/deep/ .el-transfer-panel {
  height: 100%;
  background-color: transparent;
  width: 300px;
  border-color: #666;
}

/deep/ .el-transfer-panel .el-transfer-panel__header {
  background-color: transparent;
  border-bottom: 1px solid #666;
}

/deep/ .el-transfer-panel .el-transfer-panel__footer {
  background-color: transparent;
  text-align: center;
  border-top: 1px solid #666;
}

/deep/ .el-transfer-panel__list {
  height: 100%;
}

/deep/ .el-transfer-panel__body {
  height: 100%;
  background-color: transparent;
}

/deep/ .el-transfer-panel__item.el-checkbox .el-checkbox__label {
  color: #fff;
}

/deep/
  .el-transfer-panel
  .el-transfer-panel__header
  .el-checkbox
  .el-checkbox__label {
  color: #fff;
}

transfer-style /deep/ .el-button--mini,
.el-button--small {
  border-color: #409eff;
  color: #fff;
  background-color: #409eff;
}

.transfer-style /deep/ .is-disabled .el-icon-arrow-right:before {
  color: #c0c4cc !important;
}

.transfer-style /deep/ .el-icon-arrow-right:before {
  color: #fff;
}
</style>
